<template>
  <div>
    <!-- 返回按钮 -->
    <van-icon
      class="go-back"
      name="arrow-left"
      size="20"
      @click="goBack"
    />
    <div class="container">
      <!-- 标题 -->
      <h2>短信登录</h2>
      <van-cell-group :border="false">
        <van-form>
          <!-- 手机号 -->
          <van-field
            v-model="tel"
            class="inp"
            placeholder="请输入手机号"
            size="large"
            :rules="[
              {
                require: true,
                message: '请输入正确的手机号',
                pattern: /^1[3-9]\d{9}$/,
                trigger: 'onBlur',
              },
            ]"
          />
          <!-- 验证码 -->
          <van-field
            v-model="code"
            class="inp"
            center
            clearable
            placeholder="请输入验证码"
            size="large"
            :rules="[
              {
                require: true,
                message: '请输入正确的验证码',
                pattern: /^\d{6}$/,
                trigger: 'onBlur',
              },
            ]"
          >
            <template #button>
              <div class="send-code">发送验证码</div>
            </template>
          </van-field>
        </van-form>
        <van-cell />
      </van-cell-group>
      <!-- 按钮 -->
      <van-button
        class="login-btn"
        color="linear-gradient(-45deg, #ff6034, #ee0a24)"
        @click="onLogin"
      >
        登 录
      </van-button>
    </div>
  </div>
</template>

<script>
import * as userApi from '@/api/user';

export default {
  name: 'LoginPage',
  data() {
    return {
      // 手机号
      tel: '14012341234',
      // 验证码
      code: '236810',
    };
  },
  methods: {
    goBack() {
      // 回到上一页
      this.$router.go(-1);
    },
    onLogin() {
      userApi.login({
        mobile: this.tel,
        code: this.code,
      })
        .then(msg => {
          this.$notify({
            message: msg,
            type: 'success',
          });
          // 成功后返回之前的页面
          this.goBack();
        })
        .catch(msg => {
          this.$notify({
            message: msg,
          });
        });
    },
  },
}
</script>

<style lang="less" scoped>
.go-back {
  display: block;
  padding: 16px;
  color: #999;
}
h2 {
  font-weight: 400;
  margin-bottom: 32px;
}
.container {
  padding: 32px;
  .send-code {
    color: #999;
  }
  .inp {
    padding: 16px 0;
  }
  .login-btn {
    width: 100%;
    margin-top: 16px;
  }
}
</style>
